import { ResourceInfo } from '@/service/modules/task-manage/types'
import { DeleteOutlined } from '@vicons/antd'
import { Java } from '@vicons/fa'
import {
  Add,
  AlertCircle,
  DocumentTextOutline,
  FolderOpenSharp,
  Home,
  Pencil
} from '@vicons/ionicons5'
import { DocumentQuestionMark20Filled } from '@vicons/fluent'
import { CloudDownload, CloudUpload } from '@vicons/tabler'
import { NButton, NIcon, NInput, NTree, TreeOption } from 'naive-ui'
import { computed, defineComponent, h, Ref, ref, VNode } from 'vue'
import { useResource } from './use-resource'
import AddChildDirModal from './dialog/add-child-dir-modal'
import ModDirModal from './dialog/mod-dir-modal'
import ModFileModal from './dialog/mod-file-modal'
import UploadFileModal from './dialog/upload-file-modal'
import ResourcePropertyModal from './dialog/resource-property-modal'

const ResourceManage = defineComponent({
  name: 'ResourceManage',
  setup() {
    const { resVariables, getResources, delResource } = useResource()

    const resourceTree = computed((): TreeOption[] => {
      const rootDir: TreeOption[] = [
        {
          label: window.$t('taskManage.rootDir'),
          key: -1,
          children: [],
          prefix: () => h(NIcon, { size: 20 }, h(<Home />)),
          suffix: () =>
            h(
              'div',
              { style: { float: 'right' } },
              createResouceOpBtn({
                id: -1,
                parentId: 0,
                name: '',
                childs: [],
                createTime: 0,
                updateTime: 0,
                resourceType: 'DIR',
                description: '',
                proId: 0,
                creator: '',
                fileUrl: '',
                urlQuoteId: 0
              })
            )
        }
      ]
      genResourceTree(rootDir[0], resVariables.list)
      return rootDir
    })
    //生成菜单树
    const genResourceTree = (parent: TreeOption, childs: ResourceInfo[]) => {
      childs?.forEach((item) => {
        const childOption: TreeOption = {
          label: item.name,
          key: item.id,
          children: item.resourceType === 'DIR' ? [] : undefined,
          prefix: () =>
            h(NIcon, { size: 20 }, () => {
              switch (item.resourceType) {
                case 'DIR':
                  return h(<FolderOpenSharp />)
                case 'JAR':
                  return h(<Java />)
                case 'TEXT':
                  return h(<DocumentTextOutline />)
                default:
                  return h(<DocumentQuestionMark20Filled />)
              }
            }),
          suffix: () =>
            h('div', { style: { float: 'right' } }, createResouceOpBtn(item))
        }
        parent.children?.push(childOption)
        genResourceTree(childOption, item.childs)
      })
    }
    //创建资源操作按钮
    const createResouceOpBtn = (item: ResourceInfo): VNode[] => {
      return [
        h(
          NButton,
          {
            size: 'tiny',
            style: {
              marginRight: '2px',
              display: item.resourceType === 'DIR' ? 'inline ' : 'none'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'success',
            title: window.$t('taskManage.addChildDir'),
            onClick: () => {
              handleAddChildDir(item)
            }
          },
          h(NIcon, { size: 20 }, h(<Add />))
        ),
        h(
          NButton,
          {
            size: 'tiny',
            style: {
              marginRight: '2px',
              display: item.id !== -1 ? 'inline ' : 'none'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'warning',
            title:
              item.resourceType === 'DIR'
                ? window.$t('taskManage.modDir')
                : window.$t('taskManage.modFile'),
            onClick: () => {
              item.resourceType === 'DIR'
                ? handleModDir(item)
                : handleModFile(item)
            }
          },
          h(NIcon, { size: 20 }, h(<Pencil />))
        ),
        h(
          NButton,
          {
            size: 'tiny',
            style: {
              marginRight: '2px',
              display: item.resourceType === 'DIR' ? 'inline ' : 'none'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'success',
            title: window.$t('taskManage.uploadFile'),
            onClick: () => {
              handleUploadFile(item)
            }
          },
          h(NIcon, { size: 20 }, h(<CloudUpload />))
        ),
        h(
          NButton,
          {
            size: 'tiny',
            style: {
              marginRight: '2px',
              display: item.resourceType !== 'DIR' ? 'inline ' : 'none'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'success',
            title: window.$t('taskManage.downloadFile')
          },
          h(
            'a',
            { href: item.fileUrl, download: '' },
            h(NIcon, { size: 20 }, h(<CloudDownload />))
          )
        ),
        h(
          NButton,
          {
            size: 'tiny',
            style: {
              marginRight: '2px',
              display: item.id !== -1 ? 'inline ' : 'none'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'info',
            title: window.$t('taskManage.property'),
            onClick: () => {
              handleResourceProperty(item)
            }
          },
          h(NIcon, { size: 20 }, h(<AlertCircle />))
        ),
        h(
          NButton,
          {
            size: 'tiny',
            style: {
              marginRight: '2px',
              display: item.id !== -1 ? 'inline ' : 'none'
            },
            strong: true,
            secondary: true,
            circle: true,
            type: 'error',
            title: window.$t('common.delete'),
            onClick: () => {
              handleDelResource(item)
            }
          },
          h(NIcon, { size: 20 }, h(<DeleteOutlined />))
        )
      ]
    }
    const defaultExpandedKeys = ref([-1])
    //操作的部门id
    const selectedResourceRef = ref({}) as Ref<ResourceInfo>
    //显示添加子目录弹窗
    const showAddChildDirModalRef = ref(false)
    const handleAddChildDir = (resource: ResourceInfo) => {
      selectedResourceRef.value = resource
      showAddChildDirModalRef.value = true
    }
    //显示修改目录弹窗
    const showModDirModalRef = ref(false)
    const handleModDir = (resource: ResourceInfo) => {
      selectedResourceRef.value = resource
      showModDirModalRef.value = true
    }
    //显示修改文件弹窗
    const showModFileModalRef = ref(false)
    const handleModFile = (resource: ResourceInfo) => {
      selectedResourceRef.value = resource
      showModFileModalRef.value = true
    }
    //显示上传文件弹窗
    const showUploadFileModalRef = ref(false)
    const handleUploadFile = (resource: ResourceInfo) => {
      selectedResourceRef.value = resource
      showUploadFileModalRef.value = true
    }
    //显示资源属性弹窗
    const showResourcePropertyModalRef = ref(false)
    const handleResourceProperty = (resource: ResourceInfo) => {
      selectedResourceRef.value = resource
      showResourcePropertyModalRef.value = true
    }

    //显示删除资源确认弹窗
    const handleDelResource = (resource: ResourceInfo) => {
      window.$dialog.warning({
        title: window.$t('dialog.warningTitle'),
        content: window.$t('taskManage.delResourceWarning') + resource.name,
        positiveText: window.$t('dialog.positiveText'),
        negativeText: window.$t('dialog.negativeText'),
        onPositiveClick: () => {
          delResource(resource.id)
        }
      })
    }
    const pattern = ref('')
    return {
      resVariables,
      getResources,
      resourceTree,
      defaultExpandedKeys,
      selectedResourceRef,
      showAddChildDirModalRef,
      showModDirModalRef,
      showModFileModalRef,
      showUploadFileModalRef,
      showResourcePropertyModalRef,
      handleAddChildDir,
      handleModDir,
      handleModFile,
      handleUploadFile,
      handleResourceProperty,
      pattern
    }
  },
  render() {
    return (
      <div style='margin:10px'>
        <NInput
          v-model:value={this.pattern}
          placeholder={window.$t('common.search')}
        />
        <NTree
          show-irrelevant-nodes={false}
          pattern={this.pattern}
          block-line
          data={this.resourceTree}
          default-expanded-keys={this.defaultExpandedKeys}
          selectable={false}
        ></NTree>
        <AddChildDirModal
          showModal={this.showAddChildDirModalRef}
          onModalShowChange={() => {
            this.showAddChildDirModalRef = false
          }}
          onRefreshList={this.getResources}
          parentId={this.selectedResourceRef.id}
        ></AddChildDirModal>
        <ModDirModal
          showModal={this.showModDirModalRef}
          onModalShowChange={() => {
            this.showModDirModalRef = false
          }}
          onRefreshList={this.getResources}
          resource={this.selectedResourceRef}
        ></ModDirModal>
        <UploadFileModal
          showModal={this.showUploadFileModalRef}
          onModalShowChange={() => {
            this.showUploadFileModalRef = false
          }}
          onRefreshList={this.getResources}
          parentId={this.selectedResourceRef.id}
        ></UploadFileModal>
        <ModFileModal
          showModal={this.showModFileModalRef}
          onModalShowChange={() => {
            this.showModFileModalRef = false
          }}
          onRefreshList={this.getResources}
          resource={this.selectedResourceRef}
        ></ModFileModal>
        <ResourcePropertyModal
          showModal={this.showResourcePropertyModalRef}
          onModalShowChange={() => {
            this.showResourcePropertyModalRef = false
          }}
          resource={this.selectedResourceRef}
        ></ResourcePropertyModal>
      </div>
    )
  }
})

export default ResourceManage
